<template>
  <div class="fluid field myfield">
    <label :class="{must: field.is_must}" v-if="field.title">{{field.title}}</label>
    <!-- <p class='ui text' v-if='$store.state.isDetail'>{{val}}</p> -->
    <div class="ui ignored info attached message" v-if='$store.state.isDetail'>
      <p>{{dateAll.startTime.time}}~{{dateAll.endTime.time}}</p>
    </div>
    <div v-else >
      <datepicker v-if="dateAll" :_dateAll="dateAll" @setDate="setDate"></datepicker>

    </div>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import datepicker from 'components/common/datepicker'

  export default {
    data() {
      return {
        val: '',
        dateAll: null
      }
    },
    components: {
      datepicker
    },
    methods: {
      setDate(val) {
        this.val = val
      }
    },
    watch: {
      val: function (val, old) {
        if (val != old) {
          this.$emit('setVo', this.field.name, val)
        }
      }
    },
    computed: {},
    props: ['field'],
    created() {
      this.val = this.field.fval || {}
      this.dateAll = {
        startTime: {
          time: this.val.startTime
        },
        endTime: {
          time: this.val.endTime
        }
      }

    },
    mounted() {

    }
  };
</script>

<style rel="stylesheet/less" lang="less" scoped>
  .fluid.field {
    .datepickbox {
      input {
        display: inline-block;
        vertical-align: top;
        padding: 1px 8px;
        line-height: 19px;
        font-size: 13px;
        border: 2px solid rgba(0, 0, 0, 0.2);
        /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
        border-radius: 3px;
        color: #5F5F5F;
        cursor: pointer;
      }
    }
    .datepicker-overlay {
      .cov-date-body {
        .cov-date-caption {
        }
      }
    }
  }
</style>
